<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告通知</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../common/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../css/customer_list.css" media="all">
    <style>
        .info_title{
            text-align: center;
            font-size: 26px;
            font-weight:lighter;
            margin: 20px auto;
        }
        .notice_content{
            padding: 15px 30px;
            font-size: 20px;
            line-height:37px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">关键字</label>
                        <div class="layui-input-inline mr0">
                            <input id="search_word" class="layui-input" type="text" placeholder="输入关键字"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button id="btnReset" class="layui-btn layui-btn-warm"><i class="layui-icon">&#xe669;</i>重置
                        </button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="infoTable" lay-filter="infoTable"></table>
        </div>
    </div>
</div>
<!--弹框-->
<script type="text/html" id="showNoticeForm">
    <div class="layui-card-body" id="notice" style="align-items: center;text-align: center">
        <h3 class="info_title" id="notice_title">{{d.notice_title}}</h3>
        <p class="notice_content" id="content">{{d.content}}</p>
    </div>
</script>
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../common/layui/layui2.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'table','admin', 'config','upload','layedit'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var config = layui.config;

        form.render();
        // 渲染表格
        table.render({
            elem: '#infoTable',
            url: access_baseurl+'Notice/getList.html',
            method:'POST',
            where: {},
            page: true,
            id:'infoTable',
            cols: [[
                {field: 'notice_title', title: '标题'},
                {field: 'content',title: '内容'},
                {align: 'center', field: 'add_datetime',title: '创建时间'}
            ]],
            done: function (res, curr, count) {
            }

        });

        // 搜索按钮点击事件
        $('#btnSearch').click(function () {
            var where = getWhere();
            table.reload('infoTable', {where: where});
        });

        $('#btnReset').click(function () {
            $('#search_word').val('');
            form.render();
            var where = getWhere();
            table.reload('infoTable', {where:where});
        });

        table.on('row(infoTable)', function(obj){
            var data = obj.data; // 获取当前行数据
            layer.open({
                type: 1,
                area: ['800px','600px'],
                offset: '65px',
                title: '通知公告',
                content: $('#showNoticeForm').html(),
                success: function (layero, index) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    $('#notice_title').html(data.notice_title);
                    $('#content').html(data.content);
                    if(data.pic_urls.length>0){
                        for (var i=0; i<data.pic_urls.length;i++){
                            $('#notice').append( '<div class="file-iteme">' +
                                '<div class="handle" id='+i+'></div>' +
                                '<img class="imgs" style="width: 400px;height: auto;" src='+ data.pic_urls[i] +'>' +
                                '<div class="info"></div>' +
                                '</div>');
                        }
                    }
                    form.render();
                }
            })
        });
        function getWhere() {
            var search_word = $('#search_word').val();
            var where = {
                search_word:search_word
            };
            return where;
        }
        $(document).off('click','.imgs').on("click", ".imgs", function(event){
            var imgSrc = $(this).attr("src");
            window.parent.open_pic_url(imgSrc);
            return false;
        });
    });
</script>
</body>
</html>